import React from 'react';
import {
  Row,
  Col,
  Card,
  Button,
  Table,
  Form,
  Input,
  Select,
  Divider,
  Form,
  message,
  InputNumber,
  AutoComplete,
  Tag,
  Checkbox,
  DatePicker,
  Cascader,
} from 'antd';
import moment from 'moment';
import qs from 'qs';
import { GridContent, PageHeaderWrapper, RouteContext } from '@ant-design/pro-layout';
import { connect } from 'dva';
import axios from './components/Engineering/axios';

const FormItem = Form.Item;
const Option = Select.Option;

@connect(({ loading }) => ({
  loading,
}))
class AirOnlineBooking extends React.Component {
  state = {
    emailResult: [],
    localFeeList: [],
    trailerFeeList: [],
    declareFeeList: [],
    quotationDetail: {},
    quotationDetailparams: {}, //请求运费价格详情的参数
    classificationBooking: {},
    insuranceCurrencyList: [], //币种搜索
    provinceList: [],
    citysList: [],
    districtList: [],
    streetsList: [],
    province: '',
    city: '',
    district: '',
    street: '',
  };

  decodeQuery() {
    let search = decodeURI(document.location.search);
    return search
      .replace(/(^\?)/, '')
      .split('&')
      .reduce(function(result, item) {
        let values = item.split('=');
        result[values[0]] = values[1];
        return result;
      }, {});
  }

  componentDidMount(): void {
    axios.ajax({ url: `${COMMON_DATABASE_PATH}/api/allCurrency` }).then(res => {
      res.content &&
        this.setState(
          {
            insuranceCurrencyList: res.content,
          },
          () => {},
        );
    });

    axios.ajax({ url: `${BASEDATA_PATH}/api/provinces` }).then(res => {
      res.content &&
        this.setState(
          {
            provinceList: res.content,
          },
          () => {
            console.log(this.state.provinceList, 'dfsdfdsfdf');
          },
        );
    });

    const paramsMatch = this.decodeQuery();
    let value = {};
    this.setState({
      quotationDetailparams: {
        freightId: paramsMatch.id,
        loadingPort: paramsMatch.loadingId,
        destinationPort: paramsMatch.destinationId,
      },
    });
    this.scratchStorage = {};
    this.scratchStorage.freightId = paramsMatch.id;
    this.scratchStorage.loading = paramsMatch.loadingId;
    this.scratchStorage.destination = paramsMatch.destinationId;
    value.loadingName = `${paramsMatch.loadingEnName}(${paramsMatch.loadingName})`;
    value.destinationName = `${paramsMatch.destinationEnName}(${paramsMatch.destinationName})`;
    value.weight45 = paramsMatch.p45;
    value.weight100 = paramsMatch.p100;
    value.weight300 = paramsMatch.p300;
    value.weight500 = paramsMatch.p500;
    value.weight1000 = paramsMatch.p1000;
    this.props.form.setFieldsValue({
      loadingName: value.loadingName,
      destinationName: value.destinationName,
    });
  }

  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (err) return message.err('填写的参数不完整'); //todo 需要打开
      delete values.loadingName;
      delete values.destinationName;
      values.freightId = this.scratchStorage.freightId;
      values.loading = this.scratchStorage.loading;
      values.destination = this.scratchStorage.destination;

      values.province = this.state.province;
      values.city = this.state.city;
      values.district = this.state.district;
      values.street = this.state.street;

      values.loadingTime = moment(values['loadingTime']).format('YYYY-MM-DD');
      values.deliveryDate = moment(values['deliveryDate']).format('YYYY-MM-DD');

      axios
        .ajax({ url: `${LOGISTICS_PATH}/web/quickBooking`, params: values }, 'post')
        .then(res => {
          if (res && res.resultCode == 'ok') {
            message.success(`订舱成功，稍等工作人员将会与您联系，即将返回`, 1).then(res => {
              setTimeout(() => window.history.go(-1), 1000);
            });
          } else if (res.errMessage) {
            message.error(res.content || res.errMessage);
          }
        });
    });
  };

  handleSearch = value => {
    let emailResult;
    if (!value || value.indexOf('@') >= 0) {
      emailResult = [];
    } else {
      emailResult = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    }
    this.setState({ emailResult });
  };

  handle20GPOnChange = (e: any) => {
    let obj = {};
    obj['size20gp'] = parseInt(e.target.value) || '';
    this.defQuotationDetail(obj);
  };

  handle40GPOnChange = (e: any) => {
    let obj = {};
    obj['size40gp'] = parseInt(e.target.value) || '';
    this.defQuotationDetail(obj);
  };

  handle40HQOnChange = (e: any) => {
    let obj = {};
    obj['size40hq'] = parseInt(e.target.value) || '';
    this.defQuotationDetail(obj);
  };

  defQuotationDetail = (obj: any) => {
    this.setState(
      ({ quotationDetailparams }) => ({
        quotationDetailparams: { ...quotationDetailparams, ...obj },
      }),
      () => {
        axios
          .ajax({
            url: `${LOGISTICS_PATH}/web/quotation/detail?&type=1`,
            params: this.state.quotationDetailparams,
          })
          .then(res => {
            this.setState({
              quotationDetail: res.content,
            });
            if (res.errMessage) return message.error(res.errMessage);
          });
      },
    );
  };

  oceanShippingColums = [
    {
      title: '海运费用',
      dataIndex: 'name',
      key: 'name',
      render: (text: any, record: any) => <div>{record.name}</div>,
    },
    { title: '单位', dataIndex: 'feeUnit', key: 'feeUnit' },
    {
      title: '单价',
      dataIndex: 'currency',
      key: 'currency',
      render: (text, record) => (
        <>
          {record.costPrice} {record.currency}
        </>
      ),
    },
    { title: '数量', dataIndex: 'count', key: 'count' },
    {
      title: '金额',
      dataIndex: 'quotePrice',
      key: 'quotePrice',
      render: (text, record) => (
        <>
          {record.sellPrice} {record.currency}{' '}
        </>
      ),
    },
  ];

  declareFeeListColumns = [
    {
      title: '报关费用',
      dataIndex: 'name',
      key: 'name',
      render: (text: any, record: any) => <div>{record.name}</div>,
    },
    { title: '单位', dataIndex: 'feeUnit', key: 'feeUnit' },
    {
      title: '单价',
      dataIndex: 'currency',
      key: 'currency',
      render: (text, record) => (
        <>
          {record.costPrice} {record.currency}
        </>
      ),
    },
    { title: '数量', dataIndex: 'count', key: 'count' },
    {
      title: '金额',
      dataIndex: 'quotePrice',
      key: 'quotePrice',
      render: (text, record) => (
        <>
          {record.sellPrice} {record.currency}{' '}
        </>
      ),
    },
  ];

  trailerColumns = [
    {
      title: '拖车费用',
      dataIndex: 'name',
      key: 'name',
      render: (text: any, record: any) => <div>{record.name}</div>,
    },
    { title: '单位', dataIndex: 'feeUnit', key: 'feeUnit' },
    {
      title: '单价',
      dataIndex: 'currency',
      key: 'currency',
      render: (text, record) => (
        <>
          {record.costPrice} {record.currency}
        </>
      ),
    },
    { title: '数量', dataIndex: 'count', key: 'count' },
    {
      title: '金额',
      dataIndex: 'quotePrice',
      key: 'quotePrice',
      render: (text, record) => (
        <>
          {record.sellPrice} {record.currency}{' '}
        </>
      ),
    },
  ];

  InsuranceColumns = [
    {
      title: '保险费用',
      dataIndex: 'incidenttalName',
      key: 'incidenttalName',
      render: (text: any, record: any) => (
        <div>
          {record.name}({record.code})
        </div>
      ),
    },
    {
      title: '单位',
      dataIndex: 'theunit',
      key: 'theunit',
      render: text => {
        return { '1': '箱', '2': '票' }[text] || '未知';
      },
    },
    { title: '单价', dataIndex: 'unitprice', key: 'unitprice' },
    { title: '数量', dataIndex: 'currency', key: 'currency' },
    { title: '金额', dataIndex: 'currency', key: 'currency' },
  ];

  render():
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
    | string
    | number
    | {}
    | React.ReactNodeArray
    | React.ReactPortal
    | boolean
    | null
    | undefined {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        sm: { span: 24 },
        md: { span: 6 },
      },
      wrapperCol: {
        sm: { span: 24 },
        md: { span: 18 },
      },
    };

    const { emailResult } = this.state;
    const children = emailResult.map(email => <Option key={email}>{email}</Option>);
    const {
      quotationDetail: { cnyRate, quoteFee, localFeeList, declareFeeList, trailerFeeList },
      classificationBooking,
    } = this.state;

    return (
      <>
        <PageHeaderWrapper title="在线订舱">
          <Card
            actions={[
              <Row type="flex" justify="space-between">
                <span
                  style={{
                    marginLeft: 20,
                    display: 'flex',
                    justifyContent: 'space-around',
                    alignItems: 'center',
                    fontSize: 16,
                  }}
                >
                  <Tag color="#2db7f5">汇率：</Tag>
                  {cnyRate}{' '}
                  <Tag color="#108ee9" style={{ marginLeft: 20 }}>
                    {' '}
                    合计(CNY):
                  </Tag>
                  {quoteFee}
                </span>

                <span style={{ float: 'right', marginRight: 20 }}>
                  <Button
                    style={{ marginRight: 20 }}
                    onClick={() => window.history.back()}
                    size="large"
                  >
                    取消
                  </Button>
                  <Button type="primary" size="large" onClick={this.handleSubmit}>
                    提交
                  </Button>
                </span>
              </Row>,
            ]}
          >
            <Form>
              <Row>
                <Col xs={24} md={8}>
                  <FormItem label="起运港" {...formItemLayout}>
                    {getFieldDecorator('loadingName', {
                      initialValue: '',
                      rules: [{ required: true, message: '起运港不能为空' }],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="目的港" {...formItemLayout}>
                    {getFieldDecorator('destinationName', {
                      initialValue: '',
                      rules: [{ required: true, message: '目的港不能为空' }],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>
              </Row>

              <Divider />

              <Row>
                <Col xs={24} md={8}>
                  <FormItem label="Notify Party" {...formItemLayout}>
                    {getFieldDecorator('notifyParty', {
                      initialValue: '',
                      // rules: [{required: true, message: 'Notify Party不能为空'}],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="Shipper" {...formItemLayout}>
                    {getFieldDecorator('shipper', {
                      initialValue: '',
                      // rules: [{required: true, message: 'Shipper不能为空'}],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={8}>
                  <FormItem label="Consignee" {...formItemLayout}>
                    {getFieldDecorator('consignee', {
                      initialValue: '',
                      /* rules: [{required: true, message: 'Consignee不能为空',}, ],*/
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="Marks/Numbers" {...formItemLayout}>
                    {getFieldDecorator('markNos', {
                      initialValue: '',
                      // rules: [{required: true, message: 'Marks/Numbers不能为空'}],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="货描" {...formItemLayout}>
                    {getFieldDecorator('goosDesc', {
                      initialValue: '',
                      // rules: [{required: true, message: '货描不能为空'}],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="件数" {...formItemLayout}>
                    {getFieldDecorator('packagesNum', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '件数不能为空' },
                        {
                          pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/,
                          message: '件数填写不规范，只能输入最多2位小数的数字!',
                        },
                      ],
                    })(<InputNumber placeholder="" style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="产品名称" {...formItemLayout}>
                    {getFieldDecorator('product', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '产品名称不能为空',
                        },
                      ],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={8}>
                  <FormItem label="装柜时间" {...formItemLayout}>
                    {getFieldDecorator('loadingTime', {
                      initialValue: '',
                      rules: [{ required: true, message: '装柜时间不能为空' }],
                    })(<DatePicker style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="交柜时间" {...formItemLayout}>
                    {getFieldDecorator('deliveryDate', {
                      initialValue: '',
                      rules: [{ required: true, message: '交柜时间不能为空' }],
                    })(<DatePicker style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="订舱联系人" {...formItemLayout}>
                    {getFieldDecorator('linkman', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '订舱联系人不能为空',
                        },
                      ],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="邮箱" {...formItemLayout}>
                    {getFieldDecorator('email', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '邮箱不能为空' },
                        {
                          pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
                          message: '邮箱为空或者格式不合法，请重新输入',
                        },
                      ],
                    })(
                      <AutoComplete onSearch={this.handleSearch} placeholder="">
                        {children}
                      </AutoComplete>,
                    )}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="手机号" {...formItemLayout}>
                    {getFieldDecorator('mobile', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '手机号不能为空' },
                        { pattern: /^1\d{10}$/, message: '手机号填写不规范，请重新输入!' },
                      ],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="固定电话" {...formItemLayout}>
                    {getFieldDecorator('telephone', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '固定电话不能为空' },
                        { pattern: /^0\d{2,3}-?\d{7,8}$/, message: '固定电话填写不规范' },
                      ],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label=" " colon={false} {...formItemLayout}>
                    {getFieldDecorator('baoguan', {
                      initialValue: '',
                    })(
                      <>
                        <Checkbox
                          checked={classificationBooking.Declare}
                          onChange={e => {
                            this.setState({
                              classificationBooking: {
                                ...classificationBooking,
                                Declare: e.target.checked,
                              },
                            });
                            let declareNum: number;
                            if (e.target.checked) {
                              declareNum = 1;
                            } else {
                              declareNum = 0;
                            }
                            this.defQuotationDetail({ declare: declareNum });
                          }}
                        >
                          报关
                        </Checkbox>

                        <Checkbox
                          checked={classificationBooking.trailer}
                          onChange={e => {
                            this.setState({
                              classificationBooking: {
                                ...classificationBooking,
                                trailer: e.target.checked,
                              },
                            });
                            let trailerNum: number;
                            if (e.target.checked) {
                              trailerNum = 1;
                            } else {
                              trailerNum = 0;
                            }
                            this.defQuotationDetail({ trailer: trailerNum });
                          }}
                        >
                          拖车
                        </Checkbox>

                        <Checkbox
                          checked={classificationBooking.Insurance}
                          onChange={e => {
                            this.setState({
                              classificationBooking: {
                                ...classificationBooking,
                                Insurance: e.target.checked,
                              },
                            });
                            let InsuranceNum: number;
                            if (e.target.checked) {
                              InsuranceNum = 1;
                            } else {
                              InsuranceNum = 0;
                            }
                            this.defQuotationDetail({ insurance: InsuranceNum });
                          }}
                        >
                          保险
                        </Checkbox>
                      </>,
                    )}
                  </FormItem>
                </Col>

                {classificationBooking.Insurance ? (
                  <Col xs={24} md={8}>
                    <FormItem label="货运保险货值" {...formItemLayout}>
                      {getFieldDecorator('provinceCode', {
                        initialValue: '',
                        rules: [{ required: true, message: '货运保险货值不能为空' }],
                      })(<Input placeholder="" />)}
                    </FormItem>
                  </Col>
                ) : null}

                {classificationBooking.Insurance ? (
                  <Col xs={24} md={8}>
                    <FormItem label="币种" {...formItemLayout}>
                      {getFieldDecorator('insuranceCurrency', {
                        initialValue: '',
                        placeholder: '请选择币种',
                        rules: [{ required: true, message: '币种不能为空' }],
                      })(
                        <Select
                          showSearch
                          optionFilterProp="children"
                          filterOption={(input, option) =>
                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                          }
                        >
                          {this.state.insuranceCurrencyList.map(item => (
                            <Option value={item.currencyName}>{item.currencyDesc}</Option>
                          ))}
                        </Select>,
                      )}
                    </FormItem>
                  </Col>
                ) : null}

                {classificationBooking.trailer ? (
                  <Col xs={24} md={8}>
                    <FormItem label="装柜地址" {...formItemLayout}>
                      {getFieldDecorator('areaCode', {
                        initialValue: '',
                        // rules: [{required: true, message: '装柜地址不能为空'}],
                      })(
                        <Row type="flex" gutter={16}>
                          <Col xs={24} md={8}>
                            <Select
                              showSearch
                              placeholder=""
                              value={this.state.province}
                              optionFilterProp="children"
                              filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                                0
                              }
                              onChange={(value, option) => {
                                this.setState({
                                  province: value,
                                  city: '',
                                  district: '',
                                  street: '',
                                  streetsList: [],
                                });
                                axios
                                  .ajax({
                                    url: `${BASEDATA_PATH}/api/citys`,
                                    params: { provinceCode: value },
                                  })
                                  .then(res => {
                                    res.content &&
                                      this.setState({
                                        citysList: res.content,
                                      });
                                  });
                              }}
                            >
                              {this.state.provinceList.map(item => (
                                <Option value={item.proviceCode}>{item.provinceName}</Option>
                              ))}
                            </Select>
                          </Col>

                          <Col xs={24} md={8}>
                            <Select
                              showSearch
                              value={this.state.city}
                              placeholder=""
                              optionFilterProp="children"
                              filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                                0
                              }
                              onChange={(value, option) => {
                                this.setState({
                                  city: value,
                                  district: '',
                                  street: '',
                                });
                                axios
                                  .ajax({
                                    url: `${BASEDATA_PATH}/api/districts/?cityCode=${value}`,
                                  })
                                  .then(res => {
                                    res.content &&
                                      this.setState({
                                        districtList: res.content,
                                      });
                                  });
                              }}
                            >
                              {this.state.citysList.map(item => (
                                <Option value={item.cityCode}>{item.cityName}</Option>
                              ))}
                            </Select>
                          </Col>

                          <Col xs={24} md={8}>
                            <Select
                              showSearch
                              value={this.state.district}
                              placeholder=""
                              optionFilterProp="children"
                              filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                                0
                              }
                              onChange={(value, option) => {
                                this.setState({ district: value, street: '' });
                                // https://www.zbtservices.com:8482/api/streets/350823?districtCode=350823&_channelType=ajax
                                axios
                                  .ajax({
                                    url: `${BASEDATA_PATH}/api/streets/${value}?districtCode=${value}`,
                                  })
                                  .then(res => {
                                    res.content &&
                                      this.setState({
                                        streetsList: res.content,
                                      });
                                  });
                              }}
                            >
                              {this.state.districtList.map(item => (
                                <Option value={item.districtCode}>{item.districtName}</Option>
                              ))}
                            </Select>
                          </Col>

                          {this.state.streetsList.length > 0 ? (
                            <Col xs={24} md={8}>
                              <Select
                                showSearch
                                value={this.state.street}
                                placeholder=""
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                  option.props.children
                                    .toLowerCase()
                                    .indexOf(input.toLowerCase()) >= 0
                                }
                                onChange={(value, option) => {
                                  this.setState({ street: value });
                                }}
                              >
                                {this.state.streetsList.map(item => (
                                  <Option value={item.streetsCode}>{item.streetsName}</Option>
                                ))}
                              </Select>
                            </Col>
                          ) : null}
                        </Row>,
                      )}
                    </FormItem>
                  </Col>
                ) : (
                  ''
                )}
              </Row>

              <Row>
                <Col xs={24} md={8}>
                  <FormItem label="柜型" colon={false} {...formItemLayout}>
                    {getFieldDecorator('size20gp', {
                      initialValue: '',
                      rules: [],
                    })(
                      <Input
                        placeholder=""
                        prefix=""
                        suffix="*20GP"
                        onChange={this.handle20GPOnChange}
                      />,
                    )}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="  " colon={false} {...formItemLayout}>
                    {getFieldDecorator('weight20gp', {
                      initialValue: '',
                      rules: [
                        {
                          pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,4})?$/,
                          message: '20gp柜型的重量填写不规范，只能输入最多4位小数的数字！',
                        },
                      ],
                    })(<Input placeholder="" prefix="" suffix="*KGS" />)}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="柜型" colon={false} {...formItemLayout}>
                    {getFieldDecorator('size40gp', {
                      initialValue: '',
                      rules: [],
                    })(
                      <Input
                        placeholder=""
                        prefix=""
                        suffix="*40GP"
                        onChange={this.handle40GPOnChange}
                      />,
                    )}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="  " colon={false} {...formItemLayout}>
                    {getFieldDecorator('weight40gp', {
                      initialValue: '',
                      rules: [
                        {
                          pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,4})?$/,
                          message: '40gp柜型的重量填写不规范，只能输入最多4位小数的数字！',
                        },
                      ],
                    })(
                      <Input
                        placeholder=""
                        prefix=""
                        suffix="*KGS"
                        onChange={e => console.log(e.target, 'sdfsdfdsf')}
                      />,
                    )}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="柜型" colon={false} {...formItemLayout}>
                    {getFieldDecorator('size40hq', {
                      initialValue: '',
                      rules: [],
                    })(
                      <Input
                        placeholder=""
                        prefix=""
                        suffix="*40HQ"
                        onChange={this.handle40HQOnChange}
                      />,
                    )}
                  </FormItem>
                </Col>

                <Col xs={24} md={8}>
                  <FormItem label="  " colon={false} {...formItemLayout}>
                    {getFieldDecorator('weight40hq', {
                      initialValue: '',
                      rules: [
                        {
                          pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,4})?$/,
                          message: '40hq柜型的重量填写不规范，只能输入最多4位小数的数字！',
                        },
                      ],
                    })(<Input placeholder="" prefix="" suffix="*KGS" />)}
                  </FormItem>
                </Col>
              </Row>

              <Divider />
              <Row gutter={16}>
                <Col span={!declareFeeList || !trailerFeeList ? 24 : 12}>
                  <Table
                    columns={this.oceanShippingColums}
                    dataSource={this.state.quotationDetail.localFeeList}
                    pagination={false}
                  />
                </Col>

                {declareFeeList ? (
                  <Col span={12}>
                    <Table
                      columns={this.declareFeeListColumns}
                      dataSource={this.state.quotationDetail.declareFeeList}
                      pagination={false}
                    />
                  </Col>
                ) : null}

                {trailerFeeList ? (
                  <Col span={12} style={{ marginTop: 10 }}>
                    <Table
                      columns={this.trailerColumns}
                      dataSource={this.state.quotationDetail.trailerFeeList}
                      pagination={false}
                    />
                  </Col>
                ) : null}
              </Row>
            </Form>
          </Card>
        </PageHeaderWrapper>
      </>
    );
  }
}

export default Form.create()(AirOnlineBooking);
